Cropper.js

JavaScript image cropper.

Demo

16:9

Free Form

Components

  • image-cropper

    Attributes

    aspect-ratioAccepts a number, for example 1.7777777777777777 (16:9). Use a divide node like the image above to help. 1 is for square and 0 is for free form cropping
    background-colorHEX code value for the modal background e.g. "#ffffff"
    button-colorHEX code value for the color of the buttons
    button-paddingAccepts any valid CSS values e.g. ".5rem 1rem"
    botton-roundingAccepts any valid CSS values e.g. ".375rem"
    input-idUnique ID used for the input element
    textButton text string
    text-colorButton text color

    Events

    onCropReturns a Base64-encoded image file